Het label element

Gebruik

Het element <label> kan op twee manieren gebruikt worden:

1. rond zowel de beschrijvende tekst als het formulierelement staan

   <div>
       <label>Wachtwoord
           <input type="password" name="password" maxlength="20" id="password"></label>
   </div>

2. gescheiden worden van het formulierelement en gebruikmaken van het attribuut for om aan te geven voor welk formulierelement het een label is

   <div>
       <label for="firstname">Naam</label>
       <input id="firstname" type="text" name="firstname" required="required" placeholder="Jef">
   </div>

Het for attribuut

Het attribuut for geeft aan bij welk formulierelement het label staat. Om de link de leggen tussen de labels en de besturingselementen gebruiken we het id attribuut van de besturingselementen. De waarde van het attribuut id vormt een unieke identificatie van een element ten opzichte van alle andere elementen op de pagina.

Deze techniek met de attributen for en id kan op elk formulierelement worden gebruikt.

Wanneer het element <label> gebruikt wordt met selectievakjes of keuzerondjes kan de gebruiker op zowel het formulierelement als op het label klikken om het te selecteren. Dit vergrote klikgebied maakt het formulier gemakkelijker in gebruik.

UX regels

• Labels op formulierelementen staan:
  • erboven of links van het besturingselement:
  • tekstvakken
  • tekstgebieden
  • keuzelijsten
  • bestanduploadvelden
• rechts van het besturingselement:
  • Afzonderlijke selectievakjes
  • Afzonderlijke keuzerondjes